<template>
  <view :class="type==='Sale'?'package_sale':'package'" v-for="(item,index) in attendanList" :key="item.id"
    :style="{margin:index===0?'0px auto 10rpx':'10rpx auto'}" @click="show==item.id?show=0:show=item.id">
    <view>
      <view class="center">
        <view>单号：{{item.order_sn}}</view>
        <image src="../../static/index/copy.png" mode="" @click="copyText(item.order_sn)"></image>
      </view>
      <view class="space-between top">
        <view class="center">尾气净化液
          <!-- <text>新用户</text> -->
        </view>
        <view>{{item.amount}}公斤</view>
      </view>
      <view class="space-between top">
        <view>{{item.price}}元/公斤</view>
        <view>消费金额￥{{item.money}}</view>
      </view>
      <view class="space-between top">
        <view style="color: #666;font-size:26rpx;">{{item.createtime}}</view>
        <view style="color: #558AF1;">收益：￥{{item.shouyi}}</view>
      </view>
    </view>
    <view class="space-between" v-if="item.json&&item.json.length>0">
      <view>明细</view>
      <uni-icons type="top" size="20"
        :style="{transform:show==item.id?'rotate(180deg)':'rotate(0deg)',marginLeft:'10rpx'}"></uni-icons>
    </view>
    <view class="detail space-between top" v-if="show==item.id&&item.json&&item.json.length>0">
      <view v-for="items in item.json" style="width:50%;color:#666;font-size: 26rpx;margin-top:5rpx;">{{items.name}} :
        {{items.value}}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { copyText } from '@/utils/copyText';
  import { ref } from 'vue';
  const props = defineProps({
    attendanList: { type: Array },
    type: { type: String }
  });
  const show = ref(0)
</script>

<style scoped lang="less">
  image {
    width: 28rpx;
    height: 28rpx;
    margin-left: 20rpx;
  }

  .center {
    text {
      padding: 2px 20rpx;
      box-sizing: border-box;
      background: rgba(85, 138, 241, .1);
      border-radius: 16rpx;
      font-size: 24rpx;
      font-family: SimHei;
      font-weight: 400;
      color: #558AF1;
      margin-left: 15rpx;
    }
  }

  .top {
    margin-top: 10rpx;
  }

  .detail {
    width: 100%;
    background-color: #eee;
    border-radius: 5px;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
</style>